<!-- 滑动切换选项卡演示(标准写法) -->
<!--  此demo使用了uView的tabsSwiper全屏选项卡 https://uviewui.com/components/tabsSwiper.html -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper >
		<!-- 此处代码复制了uView中tabsSwiper全屏选项卡的代码 -->
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<view slot="top" class="container-top" style="padding: 0rpx 30rpx;background-color:#ff4402 ;" :style="`background-color:${current==0?'#ff4402':bgColor}`">
			<view class="row align-items-center" :style="`padding-top: ${paddingTop}rpx;`">
				<view @click="navTo(`/pages/tao-bao/search-commodity?types=${types}`)" class="row search" style="" :style="`background-color:${current==0?'#e24002':'#2B91DB'}`">
					<zywork-icon style="margin-left: 50rpx;" type="icon-sousuo" color="#ffffff" size="40"></zywork-icon>
					<text style="font-size: 30rpx;color: #eeeeee;margin-left: 20rpx;">请输入搜索内容</text>
					<view @click.stop="navTo('/pages/tao-bao/coupon-strategy')" class="label" style="">
						领券攻略
					</view>
				</view>
			</view>
			<v-tabs activeColor="#fff" lineHeight="8rpx" lineColor="#fff" :bgColor="current==0?'#ff4402':bgColor"  color="#eeeeee"
				paddingItem="0rpx 40rpx" :lineScale="1" v-model="current" height="80rpx" @change="tabsChange"
				field="name" :scroll="true" :tabs="list"></v-tabs>
		</view>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		
		<swiper class="swiper" :current="current" @change="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" >
				  <mescroll-item :height="height"   v-show="current==index" :key="index" ref="mescrollItem" :goodsList="goodsList" @openURL="openURL"
				   @navTo="navTo('/pages/tao-bao/coupon-strategy')" :types="types"
				    :bgColorTop="current==0?'#ff4402':bgColor" :i="index" :index="current" :tabs="list" ></mescroll-item>
			</swiper-item>
		</swiper>
		<custom-tab-bar :isAndroid="1" ref="ceshi" :current="2" @click="switchTabs"></custom-tab-bar>
	</z-paging-swiper>
</template>

<script>
	import MescrollItem from "@/components/scroll-tab-swiper-item/scroll-tab-swiper-item.vue";
	export default {
		components:{
			MescrollItem
		},
		data() {
			return {
				bgColor:"#2BA7F6",
				paddingTop: 30,
				list: [
					{
						name: '精选'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				count:0,
				types:"TB",
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
						btnText: '去看看'
					}
				},
				goodsList:{
					TB:[],
					PDD:[]
				},
				height:0,
				isAndroid:true //判断是否是安卓环境
			};
		},
		created() {
			uni.hideTabBar({})
			this.paddingTop += uni.getSystemInfoSync().statusBarHeight
			this.$nextTick(() => {
				 let query = uni.createSelectorQuery().in(this);
				 query.select('.container-top').boundingClientRect();  
				 query.exec(data => {  
					this.height =uni.getSystemInfoSync().windowHeight-data[0].height
					let rpx = this.height/(uni.upx2px(100)/100);
					this.height = rpx
				 });
			})
			this.isAndroid = getApp().globalData.isAndroid;
		},
		onLoad() {
			this.getCategory();
		},
		onShow() {
			this.types = getApp().globalData.types
			this.isAuthorization();
		},
		watch:{
			types(v,k){
				this.goodsList[this.types]=[]
				if(this.current!=0){
					this.current = 0
				}else {
					this.current = 0
					let mescrollItem = this.$refs.mescrollItem[this.current]
					mescrollItem.setType(this.types)
					mescrollItem.downCallback()
				}
			},
			current(index){
				
				let mescrollItem = this.$refs.mescrollItem[index]
				mescrollItem.setType(this.types)
				if(this.goodsList[this.types][index]!=undefined&&this.goodsList[this.types][index].length>21){
					this.goodsList[this.types][index] = []
					mescrollItem.downCallback()
				}
				if(this.goodsList[this.types][index]==undefined){
					mescrollItem.downCallback()
				}
				
			}
		},
		methods: {
			queryAuthorization(){
				this.$util.doGet('/api/mall/auth/pdd/user/auth/link',{}, {}, true).then(res2 => {
					console.log("拼多多授权",res2.data)
					this.$util.openPDD(res2.data)
				}).catch(error => {
					console.log(error)
				})
			},
			isAuthorization(type){
				this.$util.doGet('/api/mall/auth/auth/pdd',{}, {}, true).then(res => {
					console.log("授权信息",res.data)
					if(!res.data){
						if(type&&type==='popup'){
							uni.showModal({
							    title: '提示',
							    content: "查看拼多多商品需要授权，是否进行拼多多授权",
								cancelText:"否",
								confirmText:"立即授权",
							    success: res1 => {
									console.log(res1)
							        if (res1.confirm) {
										this.queryAuthorization()
							        } else if (res1.cancel) {
							            uni.setStorageSync(this.$util.AUTH,false)
							        }
							    }
							});
						}else {
							uni.setStorageSync(this.$util.AUTH,false)
						}
					}else {
						uni.setStorageSync(this.$util.AUTH,res.data)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			openURL(item){
				console.log(item)
				// #ifdef APP-PLUS
				if(item.merchant =="TB"){
					this.$util.openTB(item.couponLink)
				}else {
					if(!uni.getStorageSync(this.$util.AUTH)){
						this.isAuthorization("popup");
						return
					}
					this.$util.doGet(`/api/mall/auth/pdd/goods/${item.sign}/promotion`,{}, {}, true).then(res => {
						if(res.data.code = this.$ResponseStatus.OK){
							console.log("拼多多商品信息",res.data)
							this.$util.openPDD(res.data)
						}
					}).catch(error => {
						console.log(error)
					})
				}
				// #endif
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNum:pageNo,
					pageSize:pageSize,
					merchant:this.types
				}
				this.$util.doGet('/api/mall/commodity/commodity/list',params, {}, true).then(res => {
					if (res.data.length ==0) {
						this.$refs.paging.complete([]);
						this.firstLoaded = true;
					}else {
						this.$refs.paging.complete(res.data);
						this.firstLoaded = true;
					}
				}).catch(error => {
					console.log(error)
				})
				
			},
			//获取类目信息
			getCategory(){
				this.list=[
					{
						name: '精选'
					}
				]
				this.$util.doGet('/api/mall/category/all/enable/category/platform', {}, {}, true).then(res => {
					if(this.list.length==1){
						this.list = this.list.concat(res.data)
						let mescrollItem = this.$refs.mescrollItem[this.current]
						mescrollItem.downCallback()
						// setTimeout(()=>{
						// 	this.$refs.paging.reload()
						// },2000)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			navTo(url,merchant){
				uni.navigateTo({
					url:url
				})
			},
			switchTabs(data) {
				uni.switchTab({
					url: data.url
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let index = e.detail.current;
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 100%;
	}

	.row {}

	.label {
		padding: 5rpx 20rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #F2183A, #EC4B58, #EB7D73);
		color: #FFFFFF;
		font-size: 24rpx;
		margin-left: auto;
		margin-right: 10rpx;
	}

	.search {
		width: 100%;
		height: 60rpx;
		background-color: #e24002;
		border-radius: 50rpx;
		align-items: center;
		margin-top: 30rpx;
	}
	
</style>
